<template>
  <div>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Row :gutter="20">
      <Col span="18">
        <chart-line
          :value="chart_bar_data7"
          style="height: 650px"
          :text="Hnum5text"
          :loading="loading"
        ></chart-line>
      </Col>
      <Col span="5">
        <Form label-position="top" class="inputs">
          <Divider orientation="left">图表名称</Divider>
          <div style="margin-bottom: 40px">
            <FormItem>
              <Input v-model="Hnum5text" placeholder="请输入图表名称" />
            </FormItem>
          </div>
          <div style="margin-bottom: 40px">
            <Divider orientation="left">机构名称</Divider>
            <FormItem
              v-for="(item, index) in chart_bar_data7.yData"
              :key="index"
            >
              <Input v-model="item.name"></Input>
              <RadioGroup v-model="item.radios">
                <Radio label="1">
                  <span>标记</span>
                </Radio>
                <Radio label="0">
                  <span>不标记</span>
                </Radio>
              </RadioGroup>
            </FormItem>
          </div>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import ChartLine from "@/components/charts/line.vue";
import HelloWorld from "@/components/HelloWorld.vue";
import draggable from 'vuedraggable'
export default {
  name: "chartline",
  components: {
    HelloWorld,
    // ChartBar,
    ChartLine,
    draggable
  },
  data() {
    return {
      loading: false,
      HbarWidth: "30",
      Hnum5text: "echartLine图表名称",
      hNumberRotate: "45",
      chart_bar_data7: {
        legend: ["大学1", "大学2", "大学3", "大学4", "大学5"],
        yData: [
          {
            value: [20, 15, 18, 30, 15, 3],
            name: "大学1",
            radios: "0",
          },
          {
            value: [6, 19, 13, 20, 35, 30],
            name: "大学2",
            radios: "0",
          },
          {
            value: [10, 25, 30, 19, 18, 33],
            name: "大学3",
            radios: "0",
          },
          {
            value: [24, 15, 18, 12, 38, 31],
            name: "大学4",
            radios: "0",
          },
          {
            value: [11, 29, 14, 15, 28, 39],
            name: "大学5",
            radios: "0",
          },
        ],
        xData: [2015, 2016, 2017, 2018, 2019, 2020],
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>
